<template>
  <view
    class="order-card-container bg-theme"
    :class="{ darkStyle: theme == 'dark' }"
  >
    <view class="card-head">
      <view class="title">
        <!-- 1买， 2卖 -->
        <span class="type" :class="info.way == 1 ? 'greenStyle' : 'redStyle'">{{
          info.way == 1
            ? $t("orderCard.default[1]")
            : $t("orderCard.default[0]")
        }}</span>
        <span class="title-text">{{
          `${buy_from_currency}/${buy_to_currency}`
        }}</span>
        <span class="datetime">{{
          formatDateTo(info.created_at, "HH:mm DD/MM/YYYY")
        }}</span>
      </view>
      <view class="status">
        <!-- {{ $t('orderCard.status[0]') }} -->
        <slot name="head-right"></slot>
      </view>
    </view>
    <view class="card-main">
      <view class="left">
        <view class="label">
          {{ $t("orderCard.default[2]") + `(${buy_from_currency})` }}
        </view>
        <view class="value">
          {{ $utils.numberToFixed(info.number) }}
        </view>
      </view>
      <view class="center">
        <view class="label">
          {{ $t("orderCard.default[3]") + `(${buy_to_currency})` }}
        </view>
        <view class="value">
          {{ $utils.priceToFixed(info.price) }}
        </view>
      </view>
      <view class="right">
        <view class="label">
          {{
            `${$t("orderCard.default[4]")}(${
              info.type == 1 ? buy_from_currency : buy_to_currency
            })`
          }}
        </view>
        <view class="value">
          {{ $utils.numberToFixed(info.transacted_volume) }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      point: 4, // 默认4位小数
      eCurrency: ["BTC", "ETH"],
    };
  },
  computed: {
    currencyMatch() {
      return this.info.currency_match || {};
    },
    buy_from_currency() {
      return this.currencyMatch?.base_currency_code || "";
    },
    buy_to_currency() {
      return this.currencyMatch?.quote_currency_code || '"';
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.order-card-container {
  &.darkStyle {
    border-bottom: 2rpx solid @border-color-dark;
  }
  background-color: @white;
  padding: 30rpx;
  border-bottom: 2rpx solid @border-color;
  .card-head {
    display: flex;
    align-items: center;
    height: 58rpx;
    line-height: 58rpx;
    position: relative;
    .title {
      .type {
        font-weight: bold;
        color: @red;
        font-size: 30rpx;
        margin-right: 10rpx;
        &.redStyle {
          color: @red;
        }
        &.greenStyle {
          color: @green;
        }
      }
      .title-text {
        font-weight: bold;
      }
      .datetime {
        margin-left: 50rpx;
        font-size: 24rpx;
        color: @text-tips-color;
      }
    }
    .status {
      font-size: 26rpx;
      position: absolute;
      right: 0;
      color: @text-tips-color;
      &.button {
        background-color: @bg-color-gray;
        padding: 0 20rpx;
      }
    }
  }
  .card-main {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    .label {
      font-size: 24rpx;
      color: @text-light-color;
    }
    .value {
      margin-top: 10rpx;
      font-size: 24rpx;
      font-weight: bold;
      color: @text-main-color;
    }
    .left {
      // flex: 1;
      text-align: left;
    }
    .center {
      // flex: 1;
      text-align: center;
    }
    .right {
      // flex: 1;
      text-align: right;
    }
  }
}
</style>
